<template>
  <div class="block">
    <span class="demonstration" ><h3>{{ extensionObj.name }}</h3></span>
    <el-carousel class="card">
      <el-carousel-item style="height: 290px;" class="item-div" v-for="(item,index) in extensionObj.list" :key="index">
        <div><span>日期 :</span><span>{{ item.date }}</span></div>
        <div><span>区间 :</span><span>{{ item.section }}</span></div>
        <div><span>类型 :</span><span>{{ item.type }}</span></div>
        <div><span>时间 :</span><span>{{ item.time }}</span></div>
        <div><span>负责人 :</span><span>{{ item.people }}</span></div>
        <div><span>内容 :</span><span>{{ item.context }}</span></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<script>
export default {
  name: "CarouselHome",
  props: {
    extensionObj: {
      type: Object,
      default: {
        name:"--",
        list:[
          {
            date:'--',
            section: '--',
            type : '--',
            time : '--',
            people:'--',
            context: '--',
          }
        ]
      }
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="less" scoped>

.block{
  height: 100%;
}

.item-div div{
  padding: 4px 0px;
}
.item-div div span{
  padding: 0px 10px;
  font-size: 20px;
  color: #55a532;
}
.card{
  padding-left: 5px;
  padding-right: 5px;
  height: 290px;
}
.demonstration h3 {
  color: #475669;
  font-size: 24px;
  line-height: 50px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
  border-radius: 10px;//圆角
}
.el-carousel__container{
  height: 100%;
}

</style>


